<template>
  <div>
    <el-main>
      <el-table
        ref="table"
        :data="tableData"
        :border="true"
        style="width: 100%"
        size="small"
        row-key="id"
        :tree-props="{children: 'treeList', hasChildren: 'hasChildren'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="code"
          label="编码"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="path"
          label="路径"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          :formatter="statusFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="sortIndex"
          label="排序"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          :formatter="datetimeFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="{ row }">
            <el-link type="primary" :underline="false" icon="el-icon-plus" @click="handleInsert(row)">新增子菜单</el-link>&nbsp;
            <el-link type="primary" :underline="false" icon="el-icon-edit" @click="handleUpdate(row)">编辑</el-link>
            <el-link type="primary" :underline="false" icon="el-icon-delete" @click="handleDelete(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
      </div>
      <el-footer>
        <el-button type="primary"
                   icon="el-icon-plus"
                   size="small"
                   @click="handleInsert"
        >新增根菜单
        </el-button
        >
        <el-button type="primary"
                   icon="el-icon-unlock"
                   size="small"
                   @click="handleEnables"
        >启用
        </el-button
        >
        <el-button type="primary"
                   icon="el-icon-lock"
                   size="small"
                   @click="handleDisables"
        >禁用
        </el-button
        >
        <el-button type="primary"
                   icon="el-icon-delete"
                   size="small"
                   @click="handleDeletes"
        >删除
        </el-button
        >
      </el-footer>
    </el-main>
  </div>
</template>

<script>
  import {deleteMenu,deletesMenu,enablesMenu,disablesMenu,viewMenu,searchMenu} from "@/api/system/menu";
  import {Status} from "@/utils/constant/status";
  import {parseTime} from "@/utils/common";
  import {ApiError} from "@/utils/errors";

  export default {
    data() {
      return {
        Status,
        menuVisible:false,
        menu:null,
        searchAll: false,
        selection:[],
        tableData: []
      }
    },
    created() {
      this.search();
    },
    methods: {
      handleSelectionChange(selection){
        this.selection = selection;
      },
      handleInsert(row) {
        const params = {path: "system-menu-insert"};
        if(row){
          params.query = {parentId:row.id};
        }
        this.$router.push(params);
      },
      handleUpdate(row) {
        this.$router.push({path: "system-menu-update",query:{id:row.id}});
      },
      handleDelete(row) {
        this.$confirm(`是否删除菜单 ${row.name} ?`, "提示", {
          type: "warning"
        })
          .then(() => {
            const params = {
              id: row.id
            };
            deleteMenu(params).then(res => {
              if (res.status == 200) {
                if (!res.data.success) {
                  return this.$message.error(ApiError.msg(res.data.message));
                }
                this.$message.success("删除菜单成功");
                this.search();
              }
            });
          })
          .catch(() => {});
      },
      handleDeletes() {
        this.$confirm(`是否删除选中的${this.selection.length}个菜单?`, "提示", {
          type: "warning"
        })
          .then(() => {
            const params = {
              ids: this.selection
            };
            deletesMenu(params).then(res => {
              if (res.status == 200) {
                if (!res.data.success) {
                  return this.$message.error(ApiError.msg(res.data.message));
                }
                this.$message.success(`成功删除${res.data.data.count}个菜单`);
                this.search();
              }
            });
          })
          .catch(() => {});
      },
      handleEnables() {
        const params = {
          ids: this.selection
        };
        enablesMenu(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            this.$message.success(`成功启用${res.data.data.count}个菜单`);
            this.search();
          }
        });
      },
      handleDisables() {
        const params = {
          ids: this.selection
        };
        disablesMenu(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            this.$message.success(`成功禁用${res.data.data.count}个菜单`);
            this.search();
          }
        });
      },
      handleView(row){
        const params = {id:row.id};
        viewMenu(params).then(res => {
          if (res.status == 200) {
            if (res.data.errors) {
              return this.$message.error(ApiError.msg(res.data.errors));
            }
            this.menu = res.data.data;
            this.menuVisible = true;
          }
        });
      },
      search() {
        searchMenu().then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            const data = res.data.data;
            this.tableData = data;
          }
        });
      },
      resetSearch(){
        this.searchModel.name = null;
        this.searchModel.status = null;
        this.searchModel.createTime = null;
      },
      statusFormatter(row) {
        return Status[row.status]["name"];
      },
      datetimeFormatter(row) {
        return parseTime(row["createTime"]);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/full-form";
  @import "@/styles/common-table";
</style>
